<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>xmlhttprequest请求</title>
</head>

<body>
  <div id="root">
    <ul>
      <li v-for="item in movies" :key="item.id">
        {{ item.showInfo }}
      </li>
    </ul>
  </div>

  <script src="./js/vue.js"></script>
  <script>
    new Vue({
      el: '#root',
      data: {
        // 电影列表数据
        movies: []
      },
      mounted() {
        // url请求地址  同域名中，可以用相对地址，当然也可以用网络请求绝对地址
        //const url = '/data/db.json'
        const url = 'http://127.0.0.1:5500/data/db.json'
        // 实例化一个用于异步网络请求的对象 xhr
        var xmlhttp = new XMLHttpRequest()
        // 异步处理回调事件
        xmlhttp.onreadystatechange = () => {
          // 异步请求的状态 0到4
          // xmlhttp.status http状态码
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            // 返回的文本数据
            // json字符串转 json对象
            //console.log(eval('(' + xmlhttp.responseText + ')'))
            // console.log(JSON.parse(xmlhttp.responseText))
            // 接口返回的数据
            let data = JSON.parse(xmlhttp.responseText)

            // 更新data数据源中的数据，为接口中的请求数据
            this.movies = data.movieList
          }
        }
        xmlhttp.open("GET", url, true)
        xmlhttp.send(null)

      }
    })
  </script>
</body>

</html>